<template>
  <div style="background: #EEEEEE">
    <index-top :name="userName" :is-login="isl"></index-top>
    <car-top/>
    <div style="width: 90%;margin: 0 auto;background: #ffffff;">
      <el-table
        v-loading="loading"
        :data="carList"
        ref="cart"
        @selection-change="selectionChange"
        style="width: 100%;margin-top: 10px">
        <el-table-column type="selection" width="55"/>
        <el-table-column
          prop="url"
          label=""
          width="100">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="getUrl(scope.row.sysMedical.medImage)"
              fit="fit"></el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="商品名称"
          width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.sysMedical.medName}}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          label="单价"
          width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.sysMedical.untitled }}元</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="num"
          label="数量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.medMunber" @change="handleChange(scope.row)" :min="1" :max="scope.row.sysMedical.inventory"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column
          prop="total"
          label="小计">
          <template slot-scope="scope">
            <div style="color: #ff6700;">{{ scope.row.price }}元</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="danger" circle icon="el-icon-close" plain @click="handleDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 40px;display: flex;">
        <div style="flex: 1;display: flex;">
          <div style="line-height: 40px;color: gray;margin: 0 20px;">继续购物</div>
          <div style="line-height: 40px;color: gray;margin: 0 20px;">已选择<span
            style="color: #ff6700;">{{ totalNum }}</span>件
          </div>
        </div>
        <div style="width: 250px;display: flex;">
          <div style="font-size: 18px;color: #ff6700;line-height: 40px;width: 200px;">合计{{ totalPrice }}元</div>
          <div>
            <el-button type="warning" @click="toPay()" :disabled="selectionList.length == 0"
                       style=";margin-left: 20px;width: 100px;">去结算
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <foot/>
  </div>
</template>

<script>
import CarTop from "./fff/carTop";
import Foot from "../components/foot";
import IndexTop from "../components/indexTop";
import {getToken} from "../../utils/auth";
import {isLogin} from "../../utils/request";
import {delCar, listCar, updateCar} from "../../api/client/car";
import {headUrl} from "../../utils/common";

export default {
  name:"car",
  components: {IndexTop, Foot, CarTop},
  data() {
    return {
      loading: false,
      price:0,
      carList:[],
      selectionList: [],
      totalPrice: 0,
      totalNum: 0,
      isl:false,
      userName:""
    }
  },
  created() {
    this.getUserName()
    this.getList()
  },
  methods: {
    getUserName() {
      this.userName = this.$store.state.user.name;
      if (getToken()) {
        isLogin.show = true
        this.isl = isLogin.show
      } else {
        this.isl = isLogin.show
        isLogin.show = false
      }
    },
    getList() {
      this.loading =true
      listCar(this.queryParams).then(response => {
        console.log(response)
        this.carList = response.rows;
        this.carList.forEach((row,index)=>{
          row.price = row.medMunber*row.sysMedical.untitled
        })
        this.loading = false
      });
    },
    selectionChange(row) { // checkbox选择
      this.selectionList = row
      this.getTotalPrice();
    },
    getTotalPrice() {
      this.totalPrice = 0;
      this.totalNum = 0;
      this.selectionList.forEach(ele => {
        this.totalPrice += parseFloat(ele.price);
        this.totalNum += 1;
      });
    },
    //修改操作
    handleChange(row) {
      this.loading = true
      updateCar(row).then(response => {
        this.$modal.msgSuccess("修改成功");
        // this.getList();
        this.getTotalPrice();
        row.price = row.medMunber*row.sysMedical.untitled
        this.loading = false
      });
    },

    //删除操作
    /** 删除按钮操作 */
    handleDelete(row) {
      const carId = row.carId;
      this.$modal.confirm('是否确认删除购物车 编号为"' + carId + '"的数据项？').then(function() {
        return delCar(carId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    toPay() {//结算
      this.$router.push({
        name:'pay',
        params: {
          dataObj: this.selectionList
        }
      })
    },
    getUrl(url) {
      return headUrl + url
    },
  }
}
</script>

<style scoped>

</style>
